import React,{useState} from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    FlatList,
    StatusBar,
    TextInput,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import { FontAwesome,MaterialCommunityIcons } from '@expo/vector-icons';
import '../features/Phone';

const Category = (e) => {
    const rendomColor = () => {
        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
        var color = 'rgba(' + r + ',' + g + ',' + b + ',0.7)';
        return color;
    };

    return (
        <View style={{
            width:w/5, height:w/5, borderRadius:10, marginBottom:w/20,
            justifyContent:'center', alignItems:'center', backgroundColor:rendomColor()
        }}>
            <Text style={{fontSize:16, color:'white', fontWeight:'bold'}}>{e.children}</Text>
        </View>
    )
};

const Sort = ({navigation}) => {
    const [gender,setGender] = useState([{},{display:'none'}]);

    return (
        <ScrollView style={{width:w, height:h, backgroundColor:'#f0f0f0'}}>
            {/* 排行榜 */}
            <View>
                <View style={styles.titleSort}>
                    <View style={styles.lineSort}></View>
                    <Text style={styles.txtSort}>香水排行榜</Text>
                    <View style={styles.lineSort}></View>
                </View>
                <View style={{width:w, flexDirection:'row', flexWrap:'wrap'}}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Ranklist',{id:1, name:'商业香水排行榜'})}}
                    >
                        <View style={styles.rank}>
                            <FontAwesome name="diamond" size={24} color="purple" />
                            <Text style={styles.txtRank}>商业香水排行榜</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Ranklist',{id:2, name:'沙龙香水排行榜'})}}
                    >
                        <View style={styles.rank}>
                            <MaterialCommunityIcons name="crown-outline" size={24} color="orange" />
                            <Text style={styles.txtRank}>沙龙香水排行榜</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Ranklist',{id:3, name:'新香香水排行榜'})}}
                    >
                        <View style={styles.rank}>
                            <MaterialCommunityIcons name="lightbulb-on-outline" size={24} color="#eeee00" />
                            <Text style={styles.txtRank}>新香香水排行榜</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Ranklist',{id:4, name:'平价香水排行榜'})}}
                    >
                        <View style={styles.rank}>
                            <MaterialCommunityIcons name="airballoon-outline" size={24} color="pink" />
                            <Text style={styles.txtRank}>平价香水排行榜</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>

            {/* 分类一 */}
            <View>
                <View style={styles.titleSort}>
                    <View style={styles.lineSort}></View>
                    <Text style={styles.txtSort}>按类型</Text>
                    <View style={styles.lineSort}></View>
                </View>
                <View style={styles.sort}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'入门', id:1})}}
                    >
                        <Category>入门</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'经典', id:2})}}
                    >
                        <Category>经典</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'小众', id:3})}}
                    >
                        <Category>小众</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'复古', id:4})}}
                    >
                        <Category>复古</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'平价', id:4})}}
                    >
                        <Category>平价</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'高端', id:3})}}
                    >
                        <Category>高端</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'跨界', id:2})}}
                    >
                        <Category>跨界</Category>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{navigation.navigate('Typec',{name:'猎奇', id:1})}}
                    >
                        <Category>猎奇</Category>
                    </TouchableOpacity>
                </View>
            </View>

            {/* 女士版 */}
            <View style={gender[0]}>
                {/* 分类二 */}
                <View>
                    <View style={[styles.titleSort,{marginTop:0}]}>
                        <View style={styles.lineSort}></View>
                        <Text style={styles.txtSort}>按风格</Text>
                        <View style={styles.lineSort}></View>
                    </View>
                    <View style={styles.sort}>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'清新', id:1})}}
                        >
                            <Category>清新</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'浓郁', id:2})}}
                        >
                            <Category>浓郁</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'甜美', id:3})}}
                        >
                            <Category>甜美</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'性感', id:4})}}
                        >
                            <Category>性感</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'正式', id:4})}}
                        >
                            <Category>正式</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'高冷', id:3})}}
                        >
                            <Category>高冷</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'优雅', id:2})}}
                        >
                            <Category>优雅</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'柔美', id:1})}}
                        >
                            <Category>柔美</Category>
                        </TouchableOpacity>
                    </View>
                </View>

                {/* 切换 */}
                <View style={{width:w, paddingBottom:20, alignItems:'center'}}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{
                            setGender([{display:'none'},{}])
                        }}
                    >
                        <Text style={{
                            width:w/2, padding:8, fontSize:14, color:'black', textAlign:'center',
                            borderRadius:5, borderWidth:1, borderColor:'lightgray'
                        }}>
                            切换为男士版
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>

            {/* 男士版 */}
            <View style={gender[1]}>
                {/* 分类二 */}
                <View>
                    <View style={[styles.titleSort,{marginTop:0}]}>
                        <View style={styles.lineSort}></View>
                        <Text style={styles.txtSort}>按风格</Text>
                        <View style={styles.lineSort}></View>
                    </View>
                    <View style={styles.sort}>
                    <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'清新', id:1})}}
                        >
                            <Category>清新</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'暖男', id:2})}}
                        >
                            <Category>暖男</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'忧郁', id:3})}}
                        >
                            <Category>忧郁</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'硬朗', id:4})}}
                        >
                            <Category>硬朗</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'正式', id:4})}}
                        >
                            <Category>正式</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'成熟', id:3})}}
                        >
                            <Category>成熟</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'性感', id:2})}}
                        >
                            <Category>性感</Category>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={1}
                            onPress={()=>{navigation.navigate('Typec',{name:'豪放', id:1})}}
                        >
                            <Category>豪放</Category>
                        </TouchableOpacity>
                        
                        
                        
                        
                        
                        
                        
                        
                    </View>
                </View>

                {/* 切换 */}
                <View style={{width:w, paddingBottom:20, alignItems:'center'}}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{
                            setGender([{},{display:'none'}])
                        }}
                    >
                        <Text style={{
                            width:w/2, padding:8, fontSize:14, color:'black', textAlign:'center',
                            borderRadius:5, borderWidth:1, borderColor:'lightgray'
                        }}>
                            切换为女士版
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>
        </ScrollView>
    )
};

const styles = StyleSheet.create({
    titleSort: {
        width: w,
        padding: 10,
        marginTop: 10,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    txtSort: {
        fontSize: 18,
        color: 'grey',
        margin: 5
    },
    lineSort: {
        width: w/5,
        height: 0,
        borderTopWidth: 1,
        borderTopColor: 'grey'
    },
    rank: {
        width: w/2,
        padding: 10,
        backgroundColor: 'white',
        borderWidth: 0.3,
        borderColor: 'lightgray',
        justifyContent: 'center',
        alignItems: 'center'
    },
    txtRank: {
        fontSize: 15,
        color: 'black'
    },
    sort: {
        width: w, 
        paddingLeft: w/25, 
        paddingRight: w/25, 
        flexDirection: 'row', 
        flexWrap: 'wrap', 
        justifyContent: 'space-between'
    }
})

export default Sort

